<template>
  <div class="creat_en_vue_content">
    <Header name="钩子函数" ref="header" />
    <el-image style="width: 800px" :src="imghook" :preview-src-list="srcList">
    </el-image>
    <span class="header3"> nextTick方法 </span>
    <span class="common_body">
      在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
      <br />
      在created()钩子函数执行的时候DOM
      其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，
      <br />
      所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。
      <br />
      与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，
      <br />
      此时在该钩子函数中进行任何DOM操作都不会有问题 。
      <br />
      在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，
      <br />
      这个操作都应该放进Vue.nextTick()的回调函数中。
      <br />
      比如通过ref获取组件实例
    </span>
    <span> header高度{{ height }} </span>
  </div>
</template>

<script>
export default {
  name: "Hook",

  data() {
    return {
      height: 0,
      imghook: require("../../assets/notes/lifecirle.png"),
      srcList: [require("../../assets/notes/lifecirle.png")]
    };
  },
  created() {
    // this.height = this.$refs.header.$el.getBoundingClientRect().height;
    this.$nextTick(() => {
      //自定义组件要加上 $el
      this.height = this.$refs.header.$el.getBoundingClientRect().height;
    });
  },
  mounted() {}
};
</script>

<style scoped lang="stylus">
@import 'components/common_md_class.styl';

.creat_en_vue_content {
  display: flex;
  width: 100%;
  height: 100%;
  padding-left: 32px;
  flex-direction: column;
}

.creat_en_vue_page {
  display: flex;
  flex-direction: column;

  span {
    padding-top: 4px;
  }
}
</style>
